<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>名侦探柯南档案馆</title>
<!--    <script src="../../css/base.css"></script>-->
    <script src="../../resource/vue.js"></script>
    <link rel="stylesheet" href="../../ElementUI/theme-chalk/index.css"/>
    <script src="../../ElementUI/index.js" charset="utf-8"></script>

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .logo{
            background-color: #2f3336;
            height: 60px;
        }
        .logo img{
            display: block;
            width: 168px;
        }
        .nav{
            background-color: #2f3336;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: fixed;
            top: 0;
            width: 100vw;
            /*background-color: rgba(47, 51, 54, 0.85);*/
            border-bottom: 0!important;
            z-index: 999;
        }
        .el-menu.el-menu--horizontal{
            border-bottom: 0!important;
        }
        .nav .el-menu li{
            background-color: transparent !important;
            border-bottom: none !important;
        }
        .el-card .header{
            height: 80px;
            display: flex;
            justify-content: space-between;
            margin: 0;
            padding: 0;
        }
        .el-card .header .header-title{
            font-size: 14px;
            margin: 0;
            padding: 0;
            color: #d0d1d1;
        }
        .el-divider{
            background-color:#414242;
            margin: 11px 0 11px 0;

        }
        .card-nav:hover{
            color: #8d8e8e;
            box-shadow: 0 2px 12px 0 rgba(255,255,255,0.3) !important;
        }
        .card-nav{
            /*background-color: #242729;*/
            background-color: rgba(34, 36, 37, 0.01);
            color: #717172;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border: 0;
            border-radius: 15px;
        }
        .content{

        }
        .content .el-card{
            background-color: rgba(43, 45, 46, 0.81);
            border: rgb(60, 60, 60)  solid 1px;
            color:rgb(196, 196, 196);
            font-size: 18px;
            font-weight: 700;
            margin-top: 20px;
        }
        .content .el-card:hover{

            box-shadow: 1px 0px 0px 0 rgba(60, 60, 60,0.3) !important;
        }
        .gradient-bar {
            width: 80px;
            height: 4px;
            /* 从右向左渐变：右侧透明浅青 → 左侧不透明青色 */
            background: linear-gradient(
                    to left,
                    rgba(0, 128, 128, 0),    /* 左侧：完全不透明青色（#008B8B） */
                    rgba(0, 206, 209, 1)      /* 右侧：完全透明浅青色（#00CED1） */
            );
            /*border-radius: 2px;          !* 圆角使线条更柔和 *!*/
        }
    </style>
</head>
<body >

    <div id="app">
        <el-container style="margin: 0;padding: 0;background-image: url('../../imgs/bg.jpg');">
            <el-header class="nav">
                <div class="logo" style="margin-right: 40px;opacity: 0.85">
                    <img src="../../imgs/logo.png" style="opacity: 0.85">
                </div>
<!--                导航栏-->
                <el-menu style="flex: 1"
                         class="el-menu-demo"
                        default-active="1"
                        background-color="#2f3336"
                        text-color="#fff"
                        mode="horizontal"
                        active-text-color="#ffd04b"
                >

                    <el-menu-item index="1" @click="index()">
                        <i class="el-icon-s-home"></i>
                        <span slot="title">首页</span>
                    </el-menu-item>
                    <el-menu-item index="2" @click="animeCharacters()">
                        <i class="el-icon-s-platform"></i>
                        <span slot="title">动漫</span>
                    </el-menu-item>

                </el-menu>
                <div class="welcome" style="color: #eee;margin-right: 40px">
                    欢迎{{userName}}登录
                </div>
                <div @click="gotoadmin" v-show="role == 1" style="cursor: pointer;color: #eee;margin-right: 20px">
                    进入后台
                    <i class="el-icon-s-unfold" style="font-size: 30px;cursor: pointer"></i>
                </div>
                <!-- 退出按钮 -->
                <el-button @click="logout" style="font-size: 20px;width:60px;height: 30px;margin: 0;padding: 0">
                    退出
                </el-button>
            </el-header>
            <el-main style="margin-top: 60px;height: 168vh;">
<!--                #242729-->
                <el-card style="width: 1400px;height: 130vh;margin: 0 auto; background-color:rgba(34, 36, 37, 0.95);
                        border: #242729;color:  #eee">
                    <div class="header">
                        <div style="font-size: 20px;margin: 0;padding: 0">首页</div>
                        <div class="header-title">
                            <br/>
                            <br/>
                            <br/>
                            我决定去美国了，为了像爸爸和姐姐一样加入CIA！然后彻底找出那些坏人干的坏事，某
                            天能和姐姐一起对付那个坏组织……——<span style="color: #0d6efd">本堂瑛祐</span>
                            ／<span style="color: #0d6efd">TV508</span>（野田顺子老师生日快乐）
                        </div>
                    </div>
                    <el-divider></el-divider>
                    <el-row>
                        <el-col :span="19">
                            <!-- 左侧内容导航-->
                            <div style="background-color:rgba(34, 36, 37, 0);height:700px;padding: 1px">
                                <el-row style="margin-top: 30px;padding: 0; font-size: 14px" :gutter="20">
                                    <el-col style="width: 150px" :offset="2" > <el-card class="card-nav" :body-style="{margin:0,padding:0,height: '30px'}" shadow="hover">名侦探柯南</el-card> </el-col>
                                    <el-col style="width: 150px"> <el-card class="card-nav" :body-style="{margin:0,padding:0,height: '30px'}" shadow="hover">原作漫画</el-card> </el-col>
                                    <el-col style="width: 150px" > <el-card class="card-nav" :body-style="{margin:0,padding:0,height: '30px'}" shadow="hover">电视动画</el-card> </el-col>
                                    <el-col style="width: 150px" > <el-card class="card-nav" :body-style="{margin:0,padding:0,height: '30px'}" shadow="hover">剧场版</el-card> </el-col>
                                    <el-col style="width: 150px" > <el-card class="card-nav" :body-style="{margin:0,padding:0,height: '30px'}" shadow="hover">OVA</el-card> </el-col>
                                    <el-col style="width: 150px"> <el-card class="card-nav" :body-style="{margin:0,padding:0,height: '30px'}" shadow="hover">真人版</el-card> </el-col>
                                </el-row>
                                <el-row style="margin-top: 10px;padding: 0; font-size: 14px" :gutter="20">
                                    <!--                                    <el-col :span="1"></el-col>-->
                                    <el-col style="width: 150px" :offset="2" > <el-card class="card-nav" :body-style="{margin:0,padding:0,height: '30px'}" shadow="hover">角色</el-card> </el-col>
                                    <el-col style="width: 150px"> <el-card class="card-nav" :body-style="{margin:0,padding:0,height: '30px'}" shadow="hover">音乐</el-card> </el-col>
                                    <el-col style="width: 150px" > <el-card class="card-nav" :body-style="{margin:0,padding:0,height: '30px'}" shadow="hover">制作</el-card> </el-col>
                                    <el-col style="width: 150px" > <el-card class="card-nav" :body-style="{margin:0,padding:0,height: '30px'}" shadow="hover">游戏</el-card> </el-col>
                                    <el-col style="width: 150px" > <el-card class="card-nav" :body-style="{margin:0,padding:0,height: '30px'}" shadow="hover">番外作品</el-card> </el-col>
                                    <el-col style="width: 150px"> <el-card class="card-nav" :body-style="{margin:0,padding:0,height: '30px'}" shadow="hover">关联作品</el-card> </el-col>
                                </el-row>
                                <el-row class="content" type="flex" justify="space-between" style="margin: 10px 0 0 20px;padding: 0; font-size: 14px" :gutter="0">
                                    <el-col style="width: 49%" >
                                        <div>
                                            <el-card>
                                                原&nbsp;作&nbsp;动&nbsp;画
                                                <div class="gradient-bar"></div>
                                                <br>
                                                <br>
                                                <br>
                                                <br>
                                                <br>
                                                <br>
                                            </el-card>
                                            <el-card>
                                                剧&nbsp;场&nbsp;版
                                                <div class="gradient-bar"></div>
                                                <br>
                                                <br>
                                                <br>
                                                <br>
                                            </el-card>
                                            <el-card>
                                                关&nbsp;联&nbsp;作&nbsp;品
                                                <div class="gradient-bar"></div>
                                                <br>
                                                <br>
                                                <br><br>
                                            </el-card>
                                        </div>
                                    </el-col>
                                    <el-col style="width: 49%">
                                        <div>
                                            <el-card>
                                                电&nbsp;视&nbsp;动&nbsp;画
                                                <div class="gradient-bar"></div>
                                                <br>
                                                <br>
                                                <br><br>
                                                <br>
                                                <br>
                                                <br>
                                                <br>
                                            </el-card>
                                            <el-card>
                                                音&nbsp;乐
                                                <div class="gradient-bar"></div>
                                                <br>
                                                <br>
                                                <br>
                                            </el-card>
                                            <el-card>
                                                出&nbsp;版&nbsp;物
                                                <div class="gradient-bar"></div>
                                                <br>
                                                <br>
                                                <br>
                                            </el-card>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-col>
                        <!-- 右侧导航 -->
                        <el-col :span="5">
                            <div style="height:100px;margin-left: 10px">
                                <div style="color: #dcdcdc;">
                                    <strong style="color: #4a66c2;">加入柯南百科</strong>
                                    <br>
                                    <br>
                                    <div style="font-size: 14px;">
                                    柯南百科现有<span  style="color: rgb(18, 95, 209)">3,344</span>个条目，
                                        <br>
                                    <span  style="color: rgb(18, 95, 209)">2,054</span>
                                    位用户和<span  style="color: rgb(18, 95, 209)">31</span>位活跃编辑。
                                    </div>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </el-card>

            </el-main>
        </el-container>




    </div>

    <script>
        var vue = new Vue({
            el: '#app',
            data() {
                return{
                    userName: "",
                    role:'',
                }
            },
            methods: {
                gotoadmin(){
                    window.location.href = "/html/admin/admin.html";
                },
                index(){
                    window.location.href = "/html/receptiondesk/index.html";
                },
                animeCharacters(){
                    window.location.href = "/html/receptiondesk/animeCharacters.html";
                },
                logout(){
                    localStorage.removeItem("user");
                    localStorage.removeItem("role");
                    window.location.href = "/login.html";
                }
            },
            mounted() {
                if (localStorage.getItem('showLoginSuccess') === 'true'){
                    this.$message.success('登录成功！');
                    localStorage.removeItem('showLoginSuccess');
                }
                this.userName = localStorage.getItem("user");
                this.role = localStorage.getItem("role");
            },

        })

    </script>
</body>
</html>